<!-- 图层管理面板组件 -->
<template>
  <div class="layer-panel">
    <div class="panel-header">
      <span>图层</span>
      <div class="header-actions">
        <n-button quaternary circle size="small" @click="addLayer">
          <template #icon><n-icon><AddOutline /></n-icon></template>
        </n-button>
        <n-button quaternary circle size="small" @click="removeLayer" :disabled="!selectedLayer">
          <template #icon><n-icon><RemoveOutline /></n-icon></template>
        </n-button>
      </div>
    </div>
    
    <n-scrollbar style="max-height: calc(100% - 40px)" :x-scrollable="false">
      <div class="layer-list">
        <div 
          v-for="layer in layers" 
          :key="layer.id" 
          class="layer-item"
          :class="{ 'selected': selectedLayer?.id === layer.id }"
          @click="selectLayer(layer)"
        >
          <div class="layer-visibility">
            <n-button quaternary circle size="tiny" @click.stop="toggleLayerVisibility(layer)">
              <template #icon>
                <n-icon>
                  <component :is="layer.visible ? EyeOutline : EyeOffOutline" />
                </n-icon>
              </template>
            </n-button>
          </div>
          
          <div class="layer-name">
            <n-ellipsis>{{ layer.name }}</n-ellipsis>
          </div>
          
          <div class="layer-lock">
            <n-button quaternary circle size="tiny" @click.stop="toggleLayerLock(layer)">
              <template #icon>
                <n-icon>
                  <component :is="layer.locked ? LockClosedOutline : LockOpenOutline" />
                </n-icon>
              </template>
            </n-button>
          </div>
        </div>
      </div>
    </n-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { 
  NButton, 
  NIcon, 
  NScrollbar, 
  NEllipsis 
} from 'naive-ui'
import { 
  AddOutline, 
  RemoveOutline, 
  EyeOutline, 
  EyeOffOutline, 
  LockOpenOutline, 
  LockClosedOutline 
} from '@vicons/ionicons5'
import { Layer } from '../../types/editor'

// 定义属性
const props = defineProps({
  layers: {
    type: Array as () => Layer[],
    required: true
  },
  selectedLayer: {
    type: Object as () => Layer | null,
    default: null
  }
})

// 定义事件
const emit = defineEmits([
  'select-layer', 
  'add-layer', 
  'remove-layer', 
  'update-layer'
])

// 选择图层
const selectLayer = (layer: Layer) => {
  emit('select-layer', layer)
}

// 添加新图层
const addLayer = () => {
  emit('add-layer')
}

// 删除选中图层
const removeLayer = () => {
  if (props.selectedLayer) {
    emit('remove-layer', props.selectedLayer)
  }
}

// 切换图层可见性
const toggleLayerVisibility = (layer: Layer) => {
  const updatedLayer = {
    ...layer,
    visible: !layer.visible
  }
  emit('update-layer', updatedLayer)
}

// 切换图层锁定状态
const toggleLayerLock = (layer: Layer) => {
  const updatedLayer = {
    ...layer,
    locked: !layer.locked
  }
  emit('update-layer', updatedLayer)
}
</script>

<style lang="scss" scoped>
.layer-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color-base);
  border-radius: 4px;
  
  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--border-color-base);
    background-color: var(--card-color);
    
    span {
      font-weight: 500;
    }
    
    .header-actions {
      display: flex;
      gap: 4px;
    }
  }
  
  .layer-list {
    .layer-item {
      display: flex;
      align-items: center;
      padding: 6px 8px;
      border-bottom: 1px solid var(--border-color-base);
      cursor: pointer;
      
      &:hover {
        background-color: var(--item-hover-color);
      }
      
      &.selected {
        background-color: var(--primary-color-hover);
      }
      
      .layer-visibility,
      .layer-lock {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
      }
      
      .layer-name {
        flex: 1;
        margin: 0 8px;
        font-size: 12px;
      }
    }
  }
}
</style> 